<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="contain">
      <div v-if="classifyFlag === 'NCP'">
        <img src="../../assets/img/farmBg001.png" alt="" />
      </div>
      <div v-else-if="classifyFlag === 'NZ'">
        <img src="../../assets/img/farmBg002.png" alt="" />
      </div>
      <div v-else>
        <img src="../../assets/img/farmBg001.png" alt="" />
      </div>

      <div class="main clearfix" v-loading="loading">
        <!-- 1. 推荐展示区 -->
        <div class="recommend">
          <div v-show="classifyFlag == 'NCP'">
            <h4>商家信息</h4>
            <div class="merchantinfo">
              <!-- <img
                v-show="pageInfo.baseIcon.length > 0"
                :src="baseUrl + '/sys/file/showpic?id=' + (pageInfo.baseIcon.split(',')[0].split(':')[0])"
                alt=""
                width="30" height="30"
              /> -->
              <span>商家：{{ pageInfo.baseName }}</span>
            </div>
          <div>
            <ul>
              <li style="line-height:20px; margin-bottom:5px; margin-top:5px;">所在地区：<span>{{ pageInfo.basePosition }}</span></li>
              <li style="line-height:20px; margin-bottom:5px;">主营类目：<span>{{ pageInfo.growPlants }}</span></li>
            </ul>
          </div>
          </div>        
          <h4>商家还供应</h4>
          <ul>
            <li v-for="(item, index) in recommendList" :key="index">
              <div class="poduct-pic">
                <img v-show="item.iconUrl.length > 0"
                  :src="baseUrl + '/sys/file/showpic?id=' + item.iconUrl.split(',')[0].split(':')[0]"
                  alt=""
                />
              </div>
              <p class="product-name">
                {{ item.materialName }}
                <!-- 山东优质大黄姜 小黄姜产地山东优质大黄姜 小黄姜产地 -->
              </p>
              <div
                class="product-footer clearfix"
                @click="addShopCar(item, 1, false)"
              >
                <span class="fl">价格：电议</span>
                <img src="../../assets/img/cart.png" alt="" />
              </div>
            </li>
          </ul>
        </div>

        <!-- 2.商品信息 -->
        <div class="detail-info">
          <!-- 2.1 商品信息头部 -->
          <div class="goods-info clearfix">
            <!-- 滑动商品图片 -->
            <div class="goods-pic-slide fl">
              <!-- 图片放大 -->
              <div class="show-large-pic">
                <pic-zoom
                  :url="baseUrl + '/sys/file/showpic?id=' + imgurl"
                  :scale="3"
                ></pic-zoom>
              </div>

              <!-- 视频播放 -->
              <div v-if="type === 'video'" class="video-divbg">
                <img
                  src="../../assets/img/videoIcon.png"
                  @click="playVideo"
                  class="play-cion"
                  alt=""
                />
              </div>

              <!-- 图片和视频 -->
              <div class="small-list">
                <ul>
                  <li
                    v-for="(item, index) in showList"
                    :key="index"
                    @mouseenter="changeImage(index)"
                  >
                    <!-- 图片 -->
                    <div v-if="item.type === 'img'">
                      <img
                        :src="baseUrl + '/sys/file/showpic?id=' + item.id"
                        alt=""
                      />
                    </div>

                    <!-- 视频 -->
                    <div v-if="item.type === 'video'">

                      <img
                        src="../../assets/img/videoIcon.png"
                        alt=""
                      />

                      <div class="video-bg" v-show="isShowVideo">
                        <img
                          src="../../assets/img/closeVideo.png"
                          alt=""
                          class="close-video"
                          @click="puseVideo"
                        />
                        <video
                          :src="baseUrl + '/sys/file/showvideo?id=' + item.id"
                          controls
                          class="video"
                          id="video"
                        ></video>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>

            <!-- 商品信息 -->
            <div class="good-right-info">
              <p class="right-goods-name">
                {{ pageInfo.materialName }}
              </p>
              <div class="other-info">
                <div class="price info clearfix">
                  <strong class="fl">产品价格：</strong>
                  <p class="fl">{{ goodsPrice == 0 ? '电议' : goodsPrice }}</p>
                </div>
                <div class="info spec clearfix">
                  <strong class="fl">选择规格：</strong>
                  <ul class="fl clearfix">
                    <li
                      :class="[specIndex == index ? 'active' : '']"
                      v-for="(item, index) in specList"
                      :key="index"
                      @click="sepcSelect(index, item)"
                    >
                      {{ item.standName }}
                    </li>
                  </ul>
                </div>
                <div class="buy-num info clearfix">
                  <strong class="fl">数量</strong>
                  <div class="buy-box fl">
                    <!-- <p> <span>-</span></p>

                 <input type="number">
                 <p><span>+</span></p> -->
                    <el-input-number
                      v-model="buyNum"
                      @change="handleChange"
                      :min="1"
                      :max="100"
                      label="描述文字"
                    ></el-input-number>
                  </div>
                </div>

                <div
                  class="join-car"
                  @click="addShopCar(pageInfo, buyNum, true)"
                >
                  <img src="../../assets/img/whiteCar.png" alt="" />
                  <span>加入购物车</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 2.2 商品信息底部：商品介绍和详细参数 -->
          <div class="other-intrduce">
            <div class="intrduct-nav clearfix">
              <p
                class="fl"
                :class="[tabsIndex == 0 ? 'active' : '']"
                @click="tabs(0)"
              >
                商品介绍
              </p>
              <p
                class="fl"
                :class="[tabsIndex == 1 ? 'active' : '']"
                @click="tabs(1)"
              >
                详细参数
              </p>
            </div>
            <div class="intr-con">
              <div
                class="goods-intr"
                v-if="tabsIndex == 0"
                v-html="description"
              ></div>
              <div class="detail-parm" v-else>
                <ul>
                  <li v-for="(item, index) in iaMaterialParamReqs" :key="index">
                    {{ item.paramName }}：{{ item.paramValue }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
    <div class="sideBar">
      <div>
        <div class="tips">在线客服</div>
        <ul class="list">
            <li>QQ:1605821757</li>
            <li>QQ:1640261872</li>
            <li>QQ:1605821757</li>
            <li>QQ:1640261872</li>
            <li>QQ:1605821757</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
//import PicZoom from "vue-piczoom";
import PicZoom from "../../components/PicZoom";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
    PicZoom,
  },
  data() {
    return {
      loading: true,
      classifyFlag: "",
      specIndex: 0,
      specIndexId: "", //选择的规格id
      specList: [],
      recommendList: [],
      imgurl: "",
      showList: [],
      buyNum: 1,
      tabsIndex: 0,
      pageInfo: {},
      goodsPrice: "0.00",
      iaMaterialParamReqs: [{}, {}, {}, {}, {}],
      description: "",
      isShowVideo: false, //是否显示视频
      videoUrl: "",
      type: "img",
    };
  },
  mounted() {
    //获取传递的数据
    var item = this.$route.query.item;
    this.classifyFlag = this.$route.query.pageType;

    this.getDetail(this.$route.query.materialId, this.$route.query.pageType); //获取商品详情

    console.log(this.baseUrl);
  },
  methods: {
    puseVideo() {
      this.isShowVideo = false;
      document.getElementById("video").pause();
    },
    playVideo() {
      this.isShowVideo = true;
      document.getElementById("video").play();
    },
    // 放大镜切换小图
    changeImage: function (index) {
      this.type = this.showList[index].type;
      if (this.showList[index].type === "img") {
        this.imgurl = this.showList[index].id;
      }

      if (this.showList[index].type === "video") {
        this.videoUrl = this.showList[index].id;
      }
    },
    // 规则 选择
    sepcSelect(index, item) {
      this.specIndex = index;
      this.specIndexId = item.standId;

      //选择规格，重新设置价格
      this.goodsPrice = item.price;
    },
    // 购买数量选择
    handleChange(value) {
      console.log(value);
    },
    // 商品介绍切换
    tabs(index) {
      this.tabsIndex = index;
    },

    //获取详情
    getDetail(id, classifyFlag) {
      this.loading = true;
      var httpStr = "";

      if (classifyFlag === "NCP") {
        httpStr = "/sys/iaMaterialCorps/getOfficialDetail.do";
      } else if (classifyFlag === "NZ") {
        httpStr = "/sys/iaMaterialCorps/getOfficialProductsDetail.do";
      } else {
        //默认农产品
        httpStr = "/sys/iaMaterialCorps/getOfficialDetail.do";
      }

      this.$http("get", httpStr, {
        materialId: id,
      }).then((res) => {
        if (res.code == "0000") {
          console.log("详情数据：", res);
          //页面数据
          this.pageInfo = res.result;
          this.loading = false;

          //图片和视频处理
          var imgUrl = res.result.iconUrl;
          var imgUrlList = [];
          var videoUrlList = [];

          if (imgUrl) {
            var splitList = imgUrl.split(",");
            for (let index = 0; index < splitList.length; index++) {
              const element = splitList[index];
              var elmentList = element.split(":");
              //图片
              var itemData = {
                id: elmentList[0],
                type: "img",
              };
              imgUrlList.push(itemData);
            }

            if (imgUrlList != null && imgUrlList.length > 0) {
              this.imgurl = imgUrlList[0].id;
            }
          }
          if (res.result.videoUrl) {
            var splitList = res.result.videoUrl.split(",");
            for (let index = 0; index < splitList.length; index++) {
              const element = splitList[index];
              var elmentList = element.split(":");
              //视频
              var itemData = {
                id: elmentList[0],
                type: "video",
              };
              videoUrlList.push(itemData);
            }
          }

          this.showList = imgUrlList.concat(videoUrlList);
          console.log("合并的图片和视频数据：", this.showList);

          //页面价格处理
          if (
            this.pageInfo.iaMaterialStandReqs != null &&
            this.pageInfo.iaMaterialStandReqs.length > 0
          ) {
            this.goodsPrice = this.pageInfo.iaMaterialStandReqs[0].price;
          } else {
            this.goodsPrice = this.pageInfo.price;
          }

          //规格
          this.specList = this.pageInfo.iaMaterialStandReqs;
          this.iaMaterialParamReqs = res.result.iaMaterialParamReqs;
          this.description = res.result.description;

          if (classifyFlag !== "NZ") {
            //农产品，获取推荐的其他基地商品，农资无
            this.getTjGoods(this.pageInfo.baseId);
          }
        }
      });
    },

    //获取推荐的其他基地商品
    getTjGoods(id) {
      this.$http("get", "/sys/iaBaseFoundation/findRecommendCorpsPage.do", {
        baseId: id, //基地id
      }).then((res) => {
        if (res.code == "0000") {
          console.log("基地商品：", res);
          this.recommendList = res.result.rows;
        }
      });
    },

    //添加商品到购物车
    addShopCar(goodInfo, buyNum, isDetailAdd) {
      console.log("添加到购物车的数据：", goodInfo, buyNum, isDetailAdd);
      let param = {};
      if (isDetailAdd) {
        if (this.specList != null && this.specList.length > 0) {
          this.specIndexId = this.specList[this.specIndex].standId;
          param.standId = this.specIndexId; //商品规格id
        }
      }
      param.materialId = goodInfo.materialId; //商品id
      param.num = buyNum; //商品数量

      this.$http("post", "/sys/iaShoppingTrolley/add.do", param, "json").then(
        (res) => {
          if (res.code == "0000") {
            this.$message({
              type: "success",
              message: "商品已成功加入购物车!",
            });
            this.$store.commit("joinCar", Number(buyNum));
          }
        }
      );
    },
  },
};
</script>
<style scoped>
.contain {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 20px;
  min-height: 400px;
  background: #fff;
}

.small-list {
  width: 315px;
  height: 42px;
}
.small-list ul {
  width: 315px;
  height: 42px;
}
.small-list ul li {
  width: 42px;
  height: 42px;
  background-color: white;
  margin-top: 11px;
  float: left;
  margin-right: 10px;
  border: 1px solid transparent;
}
.small-list ul li:hover {
  border: 1px solid #fe742d;
  cursor: pointer;
}
.small-list ul li:last-of-type {
  margin-right: 0;
}
.small-list ul li img {
  width: 42px;
  height: 42px;
}
.recommend {
  width: 199px;
  min-height: 585px;
  background: #ffffff;
  border-right: 9px solid #f5f5f5;
  float: left;
}
.recommend .merchantinfo {
  margin-left: 30px;
  width: 169px;
}
.recommend .merchantinfo img {
  display:inline-block;
  vertical-align: middle;
  border-radius:25px;
}
.recommend .merchantinfo span {
  display:inline-block;
  width: 130px;
  vertical-align: middle;
  overflow-x: hidden;
}
.detail-info {
  width: 992px;
  min-height: 585px;
  background: #ffffff;
  border-radius: 4px;
  float: left;
  padding: 0 44px;
  box-sizing: border-box;
}
.recommend h4 {
  line-height: 66px;
  font-size: 16px;
  color: #4a4a4a;
  padding-left: 40.5px;
  position: relative;
}
.recommend h4::before {
  content: "";
  width: 5px;
  height: 18px;
  background: #f48d06;
  border-radius: 2px;
  position: absolute;
  left: 28.5px;
  top: 23px;
}
.recommend ul li {
  margin-bottom: 30px;
  padding: 0 28.5px;
  box-sizing: border-box;
}
.recommend ul li img {
  width: 142px;
  height: 147px;
  transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  cursor: pointer;
}
.recommend ul li p.product-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #4a4a4a;
  font-size: 12px;
  margin: 5px 0;
}
.recommend ul li .product-footer {
  margin-top: 15px;
}
.recommend ul li .product-footer span {
  font-size: 14px;
  color: #d0021b;
}
.recommend ul li .product-footer img {
  width: 18px;
  height: 18px;
  float: right;
}
.poduct-pic {
  width: 142px;
  height: 147px;
  overflow: hidden;
}
.recommend ul li:hover .poduct-pic img {
  transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
}
.good-right-info {
  width: 560px;
  min-height: 200px;
  float: right;
}
.goods-pic-slide {
  width: 315px;
  position: relative;
}
.show-large-pic {
  width: 315px;
  height: 315px;
}
.goods-info {
  margin-top: 15px;
}
.good-right-info .right-goods-name {
  font-size: 18px;
  color: #656565;
  min-height: 40px;
  margin-bottom: 47px;
}
.other-info strong {
  width: 70px;
  font-size: 12px;
  color: #4a4a4a;
  line-height: 30px;
}
.other-info .price {
  margin-bottom: 10px;
}
.other-info .price p {
  font-size: 24px;
  color: #f15d39;
  font-weight: 600;
}
.other-info .price p span {
  font-size: 14px;
  color: #f15d39;
}
.other-info .spec ul {
  width: 480px;
}
.other-info .spec ul li {
  float: left;
  padding: 4px 8px;
  border: 1px solid #dfdfdf;
  margin-right: 10px;
  color: #656565;
  font-size: 12px;
  margin-bottom: 10px;
  cursor: pointer;
}
.other-info .spec ul li.active {
  border: 1px solid #fe742d;
  color: #fe742d;
}
.other-info .buy-num {
  margin-top: 40px;
}
.buy-box p {
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 1px 0px 0px 1px;
  border: 1px solid #dcdcdc;
  color: #dcdcdc;
  display: inline-block;
}
.buy-box p span {
  width: 11px;
  height: 2px;
  background: #b7b7b7;
  display: block;
  margin: 11px auto;
}
.buy-box input {
  width: 40px;
  height: 24px;
  background: #efefef;
}
.buy-num strong {
  line-height: 40px;
}
.join-car {
  width: 169px;
  height: 40px;
  background: #fe742d;
  border-radius: 20px;
  line-height: 40px;
  cursor: pointer;
  margin-top: 30px;
  margin-left: 300px;
}
.join-car:active {
  opacity: 0.6;
}
.join-car span {
  color: #fff;
  font-size: 16px;
}
.join-car img {
  width: 22px;
  height: 22px;
  margin-left: 21px;
  margin-right: 15px;
  position: relative;
  top: -4px;
}
.join-car:hover {
  opacity: 0.9;
}
.intrduct-nav {
  height: 40px;
  background: #f6f6f6;
  border: 1px solid #dddddd;
  margin-top: 40px;
}
.intrduct-nav p {
  width: 109px;
  height: 41px;
  line-height: 41px;
  text-align: center;
  color: #535353;
  font-size: 15px;
  cursor: pointer;
}
.intrduct-nav p.active {
  background: #fe742d;
  color: #fff;
}
.intr-con {
  margin-top: 20px;
}
.detail-parm {
  padding: 0 24px;
  box-sizing: border-box;
}
.detail-parm ul li {
  width: 400px;
  float: left;
  line-height: 30px;
  font-size: 14px;
  color: #606266;
}

.video-divbg {
  position: absolute;
  width: 315px;
  height: 315px;
  left: 0;
  top: 0;
  background: black;
}

.video-bg {
  position: absolute;
  width: 315px;
  height: 315px;

  z-index: 400;
  left: 0;
  top: 0;
  background: black;
}
.close-video {
  width: 10px;
  height: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  z-index: 600;
}
.video {
  width: 100%;
  height: 100%;
}
.play-cion {
  width: 39px;
  height: 39px;
  position: absolute;
  right: 138px;
  top: 135px;
  z-index: 300;
}
</style>
<style >
.goods-intr img {
  display: block;
  margin: 10px 0px 10px 0px;
  max-width: 100%;
}
.goods-intr ul li {
  line-height: 25px;
}
.goods-intr p {
  font-size: 14px;
  color: #606266;
  line-height: 25px;
}
</style>
<style scoped>
.sideBar {
	position:fixed;
	right:-182px;
	top:50px;
	background-color:#ffffff;
	border:#eea236 solid 1px;
	transition:right 0.5s;
	border:solid 1px #eea236;
}
.sideBar:hover {
	right:0;
}
.sideBar>div {
	position:relative;
}
.sideBar .tips {
	position:absolute;
	height:120px;
	line-height:25px;
	background-color:#eea236;
	width:40px;
	left:-40px;
	top:50px;
	text-align:center;
	box-sizing:border-box;
	padding:10px 10px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	font-weight:bold;
	color:#ffffff;
}
.sideBar .list {
	padding:0;
	list-style:none;
	width:180px;
	margin:0;
}
.sideBar .list>li {
	padding:15px;
	border-top:#eea236 dashed 1px;
}
.sideBar .list>li:hover {
	background-color:#f0ad4e;
	color:#ffffff;
}
.sideBar .list>li:first-child {
	border-top:none;
}
</style>